import './index.less'
import useDeviceHook from '@/hooks/device'
import useLoading from '@/hooks/loading'
import {ratio2color} from '@/libs/text2Color'
import {str2num} from '@/libs/toolkit'
import {CnBoldP, CnBoldSpan, CnMediumSpan} from '@/components/text'
import WaterTarget from '@/components/waterTarget'
import RollerDigital from '@/components/rollerDigital'
import {DeviceStatusOfStatus, ParamIcon, ParamOfStatus} from '@/components/image'

const SimpleCard = defineComponent({
  props: {
    devId: Number,
    devInfo: {
      type: Object,
      default: () => ({
        devId: Number,
        devName: String,
        devTypeId: Number,
        devTypeName: String,
        devGId: String,
        dtuId: String,
        userId: Number,
        userPhone: String,
        devStatusCode: String,
        devStatus: String,
        devCreateTime: String,
        totalOnlineTime: String,
        totalOfflineTime: String,
        lastOnlineTime: String,
        lastOfflineTime: String,
        isManage: String,
        isBind: Number,
        operateUser: null,
        devDesc: null,
        paramList: null,
        devBaseDataList: null,
        devFunList: null,
        detailDataList: null,
        devReportConfList: null
      })
    }
  },
  emits: {
    bigScreenShow: (): boolean => true
  },
  setup(props, {emit}) {
    const {updateLiveData} = useDeviceHook()
    const {loading, startLoading, closeLoading} = useLoading()
    const state = reactive<{
      dataSource: Object
    }>({
      dataSource: undefined
    })

    const devNoDataLoading = ref<boolean>(false)

    onMounted(() => {
      devNoDataLoading.value = false
      console.log(props.devInfo)
      if (!props.devInfo.devId) return
      startLoading()
      updateLiveData({
        devId: props.devInfo.devId,
        success(data) {
          state.dataSource = data
          console.log(state.dataSource)
          devNoDataLoading.value = true
          // closeLoading()
        }
      })
    })

    // 参数名称显示省略号
    const paramsNameShowOmit = () => {
      let retEle = <></>

      if (state.dataSource.paramList.length <= 5) {
        retEle = state.dataSource.paramList.map((param, idx) => (
          <ParamOfStatus class='text-left flex justify-center' status={param.paramStatusCode}>
            {param.paramName}
          </ParamOfStatus>
        ))
      } else {
        let paramList = state.dataSource.paramList.slice(0, 5)
        retEle = paramList.map((param, idx) => (
          <ParamOfStatus class='text-left flex justify-center' status={param.paramStatusCode}>
            {param.paramName}
          </ParamOfStatus>
        ))
      }
      return retEle
    }

    // 鼠标悬浮框组件函数
    const popoverContentElment = () => {
      return (
        <div class='popover_content_box'>
          {state.dataSource && state.dataSource.paramList && state.dataSource.paramList.length ? (
            <div class='w-full grid grid-cols-2 gap-x-10 gap-y-10 mt-18'>
              {state.dataSource.paramList.map(param => {
                const paramValue = str2num(param.paramValue || '')
                return (
                  <div class='w-full h-90 p-10'>
                    <div class='flex items-center gap-x-6'>
                      {param.paramName ? <ParamIcon imgName={param.paramName}></ParamIcon> : null}
                      <CnMediumSpan class='mr-4'>{param.paramName}</CnMediumSpan>
                      <CnMediumSpan class='mr-10 text-5xText text-12'>
                        {param.checkTime}
                      </CnMediumSpan>
                      {param.paramStatusCode ? (
                        <ParamOfStatus
                          showStatusText={false}
                          status={param.paramStatusCode}
                        ></ParamOfStatus>
                      ) : null}
                    </div>
                    <div class='pl-6'>
                      <RollerDigital
                        class='text-30 text-text'
                        endVal={paramValue}
                        bold={true}
                        decimals={2}
                      ></RollerDigital>
                    </div>
                  </div>
                )
              })}
            </div>
          ) : null}
        </div>
      )
    }

    return () => (
      <a-popover placement='topLeft' content={popoverContentElment()}>
        <div class='cookie-card animate__animated animate__fadeInUp'>
          {devNoDataLoading.value ? (
            <>
              {/* <span class='title'> */}
              <div class='title_box pl-20'>
                <CnBoldP>{props.devInfo.devName.toString()}</CnBoldP>
              </div>

              {/* </span> */}
              {/* <span class='span_hr'></span> */}
              {state.dataSource ? (
                <div class='w-full min-h-64 flex items-center pl-20 pt-24 '>
                  <WaterTarget
                    id={'deviceTarget' + (state.dataSource.devId || Math.random())}
                    radius={20}
                    range={((state.dataSource.nowStandRatio || 0) / 100) * 360}
                    borderColor={ratio2color(state.dataSource.nowStandRatio || 0)}
                    showDashed={false}
                    borderWidth={2}
                  >
                    <RollerDigital
                      class='text-15'
                      style={{
                        color: ratio2color(state.dataSource.nowStandRatio || 0)
                      }}
                      endVal={state.dataSource.nowStandRatio}
                      bold={false}
                    ></RollerDigital>
                  </WaterTarget>
                  <div class='flex-1 ml-24 overflow-x-hidden flex flex-col'>
                    <CnBoldP>{state.dataSource.checkResult || '无参数状态'}</CnBoldP>
                    <div class='mt-8 flex flex-wrap gap-x-16 gap-y-8'>{paramsNameShowOmit()}</div>
                    {state.dataSource.paramList.length > 5 ? <span class='moiut'>...</span> : null}
                  </div>
                </div>
              ) : null}
            </>
          ) : (
            <a-skeleton rows={2} active />
          )}
        </div>
      </a-popover>
    )
  }
})

export default SimpleCard
